<template>
  <div class="common-body-wrapper">
    <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" @handleChange="handleSearchChange"></search-header>
    <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
      <!--按钮-->
      <div class="operate-btn-group" slot="operateBtnGroup">
        <a class="ake_btn ake_btn_text" v-if="isPermmited('REPORT:AKE:EXPORT')" @click.prevent="exportData()">导出</a>
      </div>
  
      <!--普通列-->
      <template slot="tdCell" slot-scope="props">
  
        <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
          <template v-for="(item, index) in props.children">
            <el-table-column v-if="item.checked" :key="index" :label="item.text" :min-width="item.minWidth" :width="item.width" :prop="item.prop" :sortable="item.sortable">
              <template slot-scope="scope">
                <span v-if="'orderTotal' == item.prop">{{ scope.row.orderReceipts+scope.row.orderParkFee|formatMoney }}</span>
                <span v-else> {{ scope.row[item.prop] |formatMoney }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
  
        <el-table-column v-else :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
          <template slot-scope="scope">
            <span v-if="'reno' == props.prop && scope.$index != 0">{{ scope.$index }}</span>
            <span v-else-if="'reno' == props.prop && scope.$index == 0">合计</span>
            <span v-else-if="'parkName' == props.prop && scope.$index == 0"></span>
            <span v-else-if="'shouldReceipts' == props.prop">{{ scope.row[props.prop]|formatMoney }}</span>
            <span v-else-if="'totalReceipts' == props.prop">{{ scope.row[props.prop]|formatMoney }}</span>
            <span v-else-if="'parkName' == props.prop">
              <a class="imgLink" @click="toOpenParkList(scope.row,'parkNameListModal')">查看停车场</a>
            </span>
            <span v-else>{{ scope.row[props.prop] }}</span>
          </template>
        </el-table-column>
      </template>
  
      <!--操作列内的按钮-->
      <template slot="operateCell" slot-scope="props">
        <el-table-column :fixed="props.fixed" :label="props.label" min-width="130">
          <template slot-scope="scope">
            <el-button title="确认收款" size="small" type="primary" class="ake_btn_text" icon="circle-check" v-if="scope.row.status=='FINISH_PAY'" @click="confirmOnlineReceipts(scope.row)">确认收款</el-button>
          </template>
        </el-table-column>
      </template>
    </multi-fun-table>
  
    <!---->
    <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
  
    <!-- 适用停车场 modal      -->
    <basic-modal ref="parkNameListModal" width="1000" customeClass="user-row-modal" static="true">
      <h3 slot="title">适用停车场</h3>
      <div class="modal-body" slot="modal-body">
  
        <multi-fun-table tableBoxId="parkNameListModal" sortColumn='' orderType='' isNeedPrint="false" isSetTable="false" hasCheckboxCol="false" :theads-info="parkNameListRow.theadsInfo" :tbodys-info="parkNameListRow.tbodysInfo">
  
          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop">{{ scope.$index + 1 }}</span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
  
        </multi-fun-table>
  
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('parkNameListModal')">关闭</button>
      </div>
    </basic-modal>
  
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
//import '../../assets/js/libs/moment.min.js'
// import BigPicModal from '@components/widgets/BigPicModal.vue'

// image
// import images from '@mixins/image.js'

// 引进vue的js
import OnlineCharge from "./js/OnlineCharge.js";

export default {
  mixins: [common, stardardList, invokeModal, OnlineCharge],
  data() {
    return {
      total: 0,
      fixedCols: 0,
      searchList: [
        {
          index: 0,
          isShow: false,
          type: "select",
          name: "reportType",
          text: "时间维度",
          value: "day",
          isHandleChange: true,
          options: [
            { name: "日报", value: "day" },
            { name: "月报", value: "month" }
          ]
        },
        {
          index: 1,
          isShow: false,
          type: "datePicker",
          pickerType: "daterange",
          name: "rangeDate",
          propName: "startDate,endDate",
          text: "时间区间",
          value: "",
          style: { width: "360px" }
        },
        {
          index: 2,
          isShow: false,
          type: "text",
          name: "childName",
          text: "运营商",
          value: ""
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 68 },
        { index: 1, isShow: false, prop: "date", text: "日期", minWidth: 120 },
        {
          index: 2,
          isShow: false,
          prop: "operatorName",
          text: "运营商名称",
          minWidth: 120
        },
        {
          index: 3,
          isShow: false,
          prop: "parkName",
          text: "包含停车场",
          minWidth: 110
        },
        {
          index: 4,
          isShow: false,
          prop: "totalReceipts",
          text: "线上总收款",
          minWidth: 110
        },

        {
          index: 5,
          isShow: false,
          prop: "",
          text: "临时停车收款",
          minWidth: 330,
          isMultiHeader: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "tempReceipts",
              text: "总",
              minWidth: 110
            },
            {
              index: 1,
              isShow: false,
              prop: "tempReceiptsPlat",
              text: "平台收取",
              minWidth: 110
            },
            {
              index: 2,
              isShow: false,
              prop: "tempReceiptsPark",
              text: "应付车场",
              minWidth: 110
            }
          ]
        },

        {
          index: 6,
          isShow: false,
          prop: "",
          text: "月票购买收款",
          minWidth: 330,
          isMultiHeader: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "ticketReceipts",
              text: "总",
              minWidth: 110
            },
            {
              index: 1,
              isShow: false,
              prop: "ticketReceiptsPlat",
              text: "平台收取",
              minWidth: 110
            },
            {
              index: 2,
              isShow: false,
              prop: "ticketReceiptsPark",
              text: "应付车场",
              minWidth: 110
            }
          ]
        },

        {
          index: 7,
          isShow: false,
          prop: "",
          text: "预订收款",
          minWidth: 720,
          isMultiHeader: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "orderTotal",
              text: "总",
              minWidth: 110
            },
            {
              index: 1,
              isShow: false,
              prop: "orderReceipts",
              text: "预订费",
              minWidth: 110
            },
            {
              index: 2,
              isShow: false,
              prop: "orderReceiptsPlat",
              text: "预订费平台收取",
              minWidth: 140
            },
            {
              index: 3,
              isShow: false,
              prop: "orderParkFee",
              text: "停车费",
              minWidth: 110
            },
            {
              index: 4,
              isShow: false,
              prop: "orderParkPlat",
              text: "停车费平台收取",
              minWidth: 140
            },
            {
              index: 5,
              isShow: false,
              prop: "orderReceiptsPark",
              text: "应付车场",
              minWidth: 110
            }
          ]
        },

        {
          index: 8,
          isShow: false,
          prop: "",
          text: "共享车位收款",
          minWidth: 330,
          isMultiHeader: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "shareReceipts",
              text: "总",
              minWidth: 110
            },
            {
              index: 1,
              isShow: false,
              prop: "shareReceiptsPlat",
              text: "平台收取",
              minWidth: 110
            },
            {
              index: 2,
              isShow: false,
              prop: "shareReceiptsPark",
              text: "应付车场",
              minWidth: 110
            },
            {
              index: 3,
              isShow: false,
              prop: "shareReceiptsPriv",
              text: "应付个人",
              minWidth: 110
            }
          ]
        },

        {
          index: 9,
          isShow: false,
          prop: "",
          text: "优惠券收款",
          minWidth: 330,
          isMultiHeader: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "couponReceipts",
              text: "总",
              minWidth: 110
            },
            {
              index: 1,
              isShow: false,
              prop: "couponReceiptsPlat",
              text: "平台收取",
              minWidth: 110
            },
            {
              index: 2,
              isShow: false,
              prop: "couponReceiptsPark",
              text: "应付车场",
              minWidth: 110
            }
          ]
        },

        {
          index: 10,
          isShow: false,
          prop: "shouldReceipts",
          text: "线上应收款",
          minWidth: 110
        },
        {
          index: 11,
          isShow: false,
          prop: "statusStr",
          text: "状态",
          minWidth: 110
        },
        {
          index: 12,
          isShow: false,
          prop: "modifyBy",
          text: "最近操作人",
          minWidth: 110
        },
        {
          index: 13,
          isShow: false,
          prop: "modifyTime",
          text: "最近操作时间",
          minWidth: 180
        }
      ],
      tbodysInfo: []
    };
  },
  filters: {
    formatBillStatus: function(billStatus) {
      return billStatus == 2 ? "已支付" : "未支付";
    }
  }
};
</script>

<style lang="less">
.user-row-modal {
  .modal-body {
    min-height: 400px;
  }
  .first-item {
    width: 240px;
  }
}

.role-select {
  width: 240px;
}

#parkNameListModal {
  min-height: 400px;
}

</style>